<template>
  <div class="root">
    <wux-tabs wux-class="bordered" controlled :current="currentIndex" @change="onTabsChange">
      <wux-tab v-for="(item,index) in tabs" :key="index" :title="item.title"></wux-tab>
    </wux-tabs>
    <wux-spin nested :spinning="contentSpinning">
      <div class="lease-container">
        <div
          class="item"
          v-for="item in leaseList"
          :key="item"
          @click="toLeaseDetail(item.orderId)"
        >
          <div class="lease-shop">
            <span class="lease-shop-title">{{item.shopTitle}}</span>
            <span class="lease-shop-date">{{item.createTime}}</span>
          </div>
          <div class="lease-container-item">
            <div class="lease-img">
              <img
                :src="(item.img === undefined || item.img === '')? '../../../static/images/unknown.png' : item.img"
                class="img"
              />
            </div>
            <div class="lease-content">
              <div class="lease-content-title">{{item.title}}</div>
              <div class="timeout-pay">
                <span class="title">租金</span>
                <span class="timeout-pay-info">
                  <span class="val">{{item.timeoutPay}}</span>
                  <span class="unit">元 / {{item.cycleVal}}</span>
                </span>
              </div>
            </div>
            <div class="payed-amount">
              <div class="payed">￥ {{item.price}}</div>
              <div class="amount">x {{item.amount}}</div>
            </div>
          </div>
          <div class="lease-btn-group">
            <div class="lease-btn-step">
              <span :class="showTarget[item.step].cls">{{showTarget[item.step].title}}</span>
            </div>
            <wux-button type="stable" size="small">查看详情</wux-button>
          </div>
        </div>
      </div>
    </wux-spin>
  </div>
</template>

<script>
import leaseApi from "@/api/lease";
export default {
  components: {
  },
  data() {
    return {
      contentSpinning: false,
      leaseList: [],
      value: "",
      showTarget: [
        { title: "已申请", step: "0", cls: "apply" },
        { title: "租赁中", step: "1", cls: "pending" },
        { title: "归还申请总", step: "2", cls: "apply" },
        { title: "已完成", step: "3", cls: "success" }
      ],
      tabs: [
        { title: "租赁中", step: "0,1" },
        { title: "归还中", step: "2" },
        { title: "已完成", step: "3" },
        { title: "全部订单", step: "" }
      ],
      currentIndex: 0,
      selectedIndex: "0,1",
      defaultImg: '/static/images/unknown.png'
    };
  },
  mounted() {
    wx.showShareMenu();
    this.queryLease();
  },
  methods: {
    onClear() {
      this.value = "";
    },
    toLeaseDetail(orderId) {
      console.log(orderId);
      this.$store.dispatch("saveOrderId", orderId);
      this.$router.push({ path: "/pages/myLeaseDetail" });
    },
    onTabsChange(e) {
      this.currentIndex = e.target.key;
      this.selectedIndex = this.tabs[e.target.key].step;
      this.queryLease();
    },
    queryLease() {
      if (JSON.stringify(this.$store.state.user) === "{}") {
        wx.showModal({
          title: "提示",
          content: "请先登录",
          success: function (res) {
            if (res.confirm) {
              wx.redirectTo({
                url: "/pages/login"
              });
            }
          }
        });
        return false;
      }
      this.contentSpinning = !this.contentSpinning;
      this.$http
        .request({
          url: leaseApi.queryLeaseByType,
          method: "POST",
          body: {
            openId: this.$store.state.user.openId,
            shopId: this.$store.state.shop.id,
            step: this.selectedIndex,
            target: 3
          }
        })
        .then(res => {
          this.contentSpinning = !this.contentSpinning;
          this.leaseList = res.list;
        });
    }
  }
};
</script>


<style scoped lang="less">
.root {
  .lease-container {
    height: 100vh;
    overflow-y: auto;
    background: #f3f3f3;
    .item {
      border-top: 1px solid #eeeeee;
      position: relative;
      padding: 0 0 10px 0;
      .lease-shop {
        background: #fff;
        padding: 10px;
        position: relative;
        .lease-shop-title {
          font-size: 16px;
          font-weight: 600;
        }
        .lease-shop-date {
          float: right;
          font-size: 14px;
          color: #333333;
        }
        &:after {
          content: " ";
          position: absolute;
          height: 1px;
          background-color: #efefef;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
      .lease-container-item {
        background: #fff;
        display: flex;
        position: relative;
        .lease-img {
          flex: 0.2;
          padding: 10px;
          .img {
            width: 80px;
            height: 80px;
          }
        }
        .lease-content {
          padding: 10px;
          flex: 1;
          font-size: 14px;
          .lease-content-title {
            font-size: 18px;
            padding-bottom: 10px;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /*要显示的行数*/
            -webkit-box-orient: vertical;
          }
          .timeout-pay {
            font-size: 13px;
            margin: 10px 0 0 0;
            .title {
              padding: 0 5px 0 0;
            }
            .timeout-pay-info {
              .val {
                color: red;
                font-size: 14px;
              }
              .unit {
                padding: 0 5px;
              }
            }
          }
        }
        .payed-amount {
          flex: 0.3;
          padding: 10px;
          .amount {
            font-size: 12px;
            color: #999;
            text-align: right;
          }
          .payed {
            text-align: right;
            margin: 0 0 23px 0;
          }
        }
        &:after {
          content: " ";
          position: absolute;
          height: 1px;
          background-color: #efefef;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
      .lease-btn-group {
        background-color: #fff;
        padding: 10px;
        text-align: right;
        .lease-btn-step {
          .pending {
            color: #bdbf36;
          }
          .success {
            color: #2b9e34;
          }
          .apply {
            color: #bf6f36;
          }
          float: left;
          padding: 3px;
          color: #999;
        }
      }
    }
  }
}
</style>


